<script setup lang="ts">

import {onMounted, ref} from 'vue'
import {cluster} from "radash";
import * as echarts from 'echarts'
import IconDropDown from "@/components/IconDropDown.vue";
import IconDate from "@/components/IconDate.vue";
import {
  getDeviceInfos,
  getEnergyConsumptionCompareDatas,
  getEnergyConsumptionTotalData,
  getEnergyAnalogicalAna1lysisChart,
  getDataAlarmEnergyConsumptionList,
  getEnergyConsumptionDnBarChart,
  getReportDates, getEnergyChainAnalysisChart
} from '@/api/base'
import {useRouter} from "vue-router";

const router = useRouter()
const cid = router.currentRoute.value.query.cid as string
const ops = ref<any>([])

// 顶部对比信息
const energyConsumptionInfo = ref<any>([])
const _getEnergyConsumptionCompareDatas = () => {
  getEnergyConsumptionCompareDatas(cid).then(res => {
    if (res.code === 200) {
      energyConsumptionInfo.value = res.data
    }
  })
}

// 能源流向
const energyConsumptionDnBar = ref<any>({})
const _getEnergyConsumptionTotalData = () => {
  getEnergyConsumptionTotalData(cid).then(res => {
    if (res.code === 200) {
      const data: any = res.data
      if (Array.isArray(data.deviceTotalDatas)) {
        data.deviceTotalDatas = cluster(data.deviceTotalDatas, 2)
      }
      energyConsumptionDnBar.value = data
    }
  })
}

// 同比
const tbValue = ref<any>({deviceIds: [], dateTime: null, thb: 1,hbdateTime:[]})
const opsTbHb = ref<any>([{id: 1, name: '同比'}, {id: 2, name: '环比'}])
const changeDeviceTb = (value: any) => {
  tbValue.value.deviceIds = value
  _getEnergyAnalogicalAna1lysisChart()
}
const changeDeviceTbDate = (value: any) => {
  tbValue.value.dateTime = value
  _getEnergyAnalogicalAna1lysisChart()
}
const changeDeviceThb = (value: any) => {
  tbValue.value.thb = value
  _getEnergyAnalogicalAna1lysisChart()
}
const changeDeviceHbDate = (value: any) => {
  tbValue.value.hbdateTime = value
  _getEnergyAnalogicalAna1lysisChart()
}
const chartRef = ref(null)
let myChart1: any = null
const _getEnergyAnalogicalAna1lysisChart = () => {
  if(tbValue.value.thb===1){
    const endDate = tbValue.value.dateTime?.[1] || ''
    const startDate = tbValue.value.dateTime?.[0] || ''
    getEnergyAnalogicalAna1lysisChart(tbValue.value.deviceIds, endDate, startDate).then(res => {
      if (res.code === 200 && res.data) {
        if (chartRef.value) {
          if (myChart1) {
            myChart1.dispose();
          }
          myChart1 = echarts.init(chartRef.value);
          const series = res?.data?.yDatas?.map(item => {
            return {
              name: item.name,
              type: 'line',
              data: item.datas
            }
          })
          const option1 = {
            tooltip: {
              trigger: 'axis'
            },
            textStyle: {
              color: '#fff'
            },
            grid: {
              left: '3%',
              right: '3%',
              bottom: '15%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: res.data.xTimes
            },
            yAxis: {
              type: 'value'
            },
            series: series
          }


          myChart1.setOption(option1);
        }
      }
    })
  }else {
    getEnergyChainAnalysisChart(tbValue.value.deviceIds, tbValue.value.hbdateTime).then(res => {
      if (res.code === 200 && res.data) {
        if (chartRef.value) {
          if (myChart1) {
            myChart1.dispose();
          }
          myChart1 = echarts.init(chartRef.value);
          const series = res?.data?.yDatas?.map(item => {
            return {
              name: item.name,
              type: 'line',
              data: item.datas
            }
          })
          const option1 = {
            tooltip: {
              trigger: 'axis'
            },
            textStyle: {
              color: '#fff'
            },
            grid: {
              left: '3%',
              right: '3%',
              bottom: '15%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: res.data.xTimes
            },
            yAxis: {
              type: 'value'
            },
            series: series
          }


          myChart1.setOption(option1);
        }
      }
    })
  }
}

// 告警信息
enum AlarmType {
  Device = 0,
  Process = 1,
  Energy = 2,
  Environmental = 3,
  Inspection = 4,
  SafetyHelmet = 5
}

const getAlarmTypeDescription = (type: AlarmType): string => {
  switch (type) {
    case AlarmType.Device:
      return "装置报警";
    case AlarmType.Process:
      return "工艺报警";
    case AlarmType.Energy:
      return "能耗报警";
    case AlarmType.Environmental:
      return "环保报警";
    case AlarmType.Inspection:
      return "巡检报警";
    case AlarmType.SafetyHelmet:
      return "安全帽报警";
    default:
      return "未知报警";
  }
};

const alarmInformation = ref<any>([])
const _getDataAlarmEnergyConsumptionList = () => {
  getDataAlarmEnergyConsumptionList(cid).then(res => {
    if (res.code === 200) {
      alarmInformation.value = res.data?.map((item: any) => {
        item.type_ext = getAlarmTypeDescription(item.type as AlarmType);
        return item;
      });
    }
  })
}

//获取下拉框数据
const _getDeviceInfos = () => {
  getDeviceInfos(cid).then(res => {
    if (res.code === 200 && res.data.length > 0) {
      ops.value = res.data
      //同比
      tbValue.value.deviceIds.push(res.data[0].id)
      if (res.data[1].id) {
        tbValue.value.deviceIds.push(res.data[1].id)
      }
      _getEnergyAnalogicalAna1lysisChart()
      _getReportDates(res.data[0].id) //获取日期配置
    }
  })
}
//获取日期配置
const dateConfig = ref<any>({
  day: {
    id: null,
    startDate: null,
    endDate: null
  },
  month: {
    id: null,
    startDate: null,
    endDate: null
  },
  year: {
    id: null,
    startDate: null,
    endDate: null
  }
})
const _getReportDates = (id) => {
  getReportDates().then(res => {
    if (res.code === 200 && Array.isArray(res.data)) {
      dateConfig.value = {
        day: {
          id,
          startDate: res.data?.[0]?.startDate || null,
          endDate: res.data?.[0]?.endDate || null
        },
        month: {
          id,
          startDate: res.data?.[3]?.startDate || null,
          endDate: res.data?.[3]?.endDate || null
        },
        year: {
          id,
          startDate: res.data?.[4]?.startDate || null,
          endDate: res.data?.[4]?.endDate || null
        }
      }
      _getEnergyConsumptionDnBarChart(dateConfig.value.day)
      _getEnergyConsumptionDnBarChart(dateConfig.value.month)
      _getEnergyConsumptionDnBarChart(dateConfig.value.year)
    }
  })
}
const chartDay = ref(null)
const chartMonth = ref(null)
const chartYear = ref(null)
const _getEnergyConsumptionDnBarChart = (reqValue: any) => {
  getEnergyConsumptionDnBarChart(reqValue).then(res => {
    if (res.code === 200) {
      const series = res?.data?.ydata?.map(item => {
        return {
          name: item.name,
          type: 'line',
          data: item.data
        }
      })
      const option1 = {
        tooltip: {
          trigger: 'axis'
        },
        textStyle: {
          color: '#fff'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '25%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: res.data.xdata
        },
        yAxis: {
          type: 'value'
        },
        series: series
      }
      if (reqValue.startDate === dateConfig.value.day.startDate) {
        if (chartDay.value) {
          if (chartDay.value) {
            const myChart = echarts.init(chartDay.value);
            myChart.setOption(option1);
          }
        }
      } else if (reqValue.startDate === dateConfig.value.month.startDate) {
        if (chartMonth.value) {
          const myChart = echarts.init(chartMonth.value);
          myChart.setOption(option1);
        }
      } else {
        if (chartYear.value) {
          const myChart = echarts.init(chartYear.value);
          myChart.setOption(option1);
        }
      }
    }
  })
}

onMounted(() => {

  _getEnergyConsumptionCompareDatas() //顶部对比信息
  _getEnergyConsumptionTotalData()// 能源流向
  _getDataAlarmEnergyConsumptionList() //告警信息
  _getDeviceInfos()
})

const back = () => {
  router.go(-1)
}
</script>

<template>
  <div class="elect-all">
    <div class="page-name">
      <img @click="back" class="public-back_img cursor-pointer" src="@/assets/publick-back.png" alt="">
      <span @click="back" class="public-back_tit cursor-pointer">用电安全</span>
    </div>
    <div class="elect-top">
      <div class="elect-li elect-day">
        <div class="elect-li_cont">
          <div class="elect-li_tit">
            <span class="elect-li_tit--text">本日</span>
            <span class="elect-li_tit--num"><em>{{ energyConsumptionInfo?.[0]?.thisData }}</em>kwh</span>
          </div>
          <div class="elect-li_prop">
            <span class="elect-prop_tit">同比昨日</span>
            <em>{{ energyConsumptionInfo?.[0]?.compareToLastRiseRateStr }}</em>
            <span v-if="energyConsumptionInfo?.[0]?.compareToLastRiseRate>0" class="elect-prop_up"></span>
            <span v-else class="elect-prop_down"></span>
            <span class="elect-prop_num">{{ energyConsumptionInfo?.[0]?.compareToLastDataDiff }}</span>
          </div>
        </div>
      </div>
<!--      <div class="elect-li elect-week">-->
<!--        <div class="elect-li_cont">-->
<!--          <div class="elect-li_tit">-->
<!--            <span class="elect-li_tit&#45;&#45;text">本周</span>-->
<!--            <span class="elect-li_tit&#45;&#45;num"><em>{{ energyConsumptionInfo?.[1]?.thisData }}</em>kwh</span>-->
<!--          </div>-->
<!--          <div class="elect-li_prop">-->
<!--            <span class="elect-prop_tit">同比上周</span>-->
<!--            <em>{{ energyConsumptionInfo?.[1]?.compareToLastRiseRateStr }}</em>-->
<!--            <span v-if="energyConsumptionInfo?.[1]?.compareToLastRiseRate>0" class="elect-prop_up"></span>-->
<!--            <span v-else class="elect-prop_down"></span>-->
<!--            <span class="elect-prop_num">{{ energyConsumptionInfo?.[1]?.compareToLastDataDiff }}</span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
      <div class="elect-li elect-month">
        <div class="elect-li_cont">
          <div class="elect-li_tit">
            <span class="elect-li_tit--text">本旬</span>
            <span class="elect-li_tit--num"><em>{{ energyConsumptionInfo?.[2]?.thisData }}</em>kwh</span>
          </div>
          <div class="elect-li_prop">
            <span class="elect-prop_tit">同比上旬</span>
            <em>{{ energyConsumptionInfo?.[2]?.compareToLastRiseRateStr }}</em>
            <span v-if="energyConsumptionInfo?.[2]?.compareToLastRiseRate>0" class="elect-prop_up"></span>
            <span v-else class="elect-prop_down"></span>
            <span class="elect-prop_num">{{ energyConsumptionInfo?.[2]?.compareToLastDataDiff }}</span>
          </div>
        </div>
      </div>
      <div class="elect-li elect-week">
        <div class="elect-li_cont">
          <div class="elect-li_tit">
            <span class="elect-li_tit--text">本月</span>
            <span class="elect-li_tit--num"><em>{{ energyConsumptionInfo?.[3]?.thisData }}</em>kwh</span>
          </div>
          <div class="elect-li_prop">
            <span class="elect-prop_tit">同比上月</span>
            <em>{{ energyConsumptionInfo?.[3]?.compareToLastRiseRateStr }}</em>
            <span v-if="energyConsumptionInfo?.[3]?.compareToLastRiseRate>0" class="elect-prop_up"></span>
            <span v-else class="elect-prop_down"></span>
            <span class="elect-prop_num">{{ energyConsumptionInfo?.[3]?.compareToLastDataDiff }}</span>
          </div>
        </div>
      </div>
      <div class="elect-li elect-month">
        <div class="elect-li_cont">
          <div class="elect-li_tit">
            <span class="elect-li_tit--text">本年</span>
            <span class="elect-li_tit--num"><em>{{ energyConsumptionInfo?.[4]?.thisData }}</em>kwh</span>
          </div>
          <div class="elect-li_prop">
            <span class="elect-prop_tit">同比上年</span>
            <em>{{ energyConsumptionInfo?.[4]?.compareToLastRiseRateStr }}</em>
            <span v-if="energyConsumptionInfo?.[4]?.compareToLastRiseRate>0" class="elect-prop_up"></span>
            <span v-else class="elect-prop_down"></span>
            <span class="elect-prop_num">{{ energyConsumptionInfo?.[4]?.compareToLastDataDiff }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="elect-middle">
      <div class="elect-left">
        <div class="public-energy public-list_tit"/>
        <div class="elect-left_cont">
          <div class="elect-cont_top">
            <img src="@/assets/electricity/elect-one.png" alt="" class="elect-cont_img">
            <div class="elect-cont_tit">
              <p>{{ energyConsumptionDnBar.classroomName }}</p>
              <span>{{ energyConsumptionDnBar.totalData }}kwh</span>
            </div>
          </div>
          <el-carousel indicator-position="none" height="158px">
            <el-carousel-item v-for="(item,index) in energyConsumptionDnBar.deviceTotalDatas" :key="index">
              <div class="elect-left_list">
                <div class="elect-left_li" v-for="(i,idx) in item" :key="idx">
                  <img src="@/assets/electricity/elect-icon.png" alt="" class="elect-li_img">
                  <div class="elect-li_cont">
                    <span class="line-clamp-1">{{ i.deviceName }}</span>
                    <p><em>{{ i.totalData }}</em>kwh</p>
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>

        </div>
      </div>
      <div class="elect-chart">
        <div class="elect-chart_top">
          <div class="">
            <el-select
                v-model="tbValue.thb"
                placeholder="请选择"
                size="large"
                :suffix-icon="IconDropDown"
                style="width: 140px;"
                class="public-select"
                @change="changeDeviceThb"
            >
              <el-option
                  v-for="item in opsTbHb"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
            <el-select
                v-model="tbValue.deviceIds"
                placeholder="请选择"
                size="large"
                :suffix-icon="IconDropDown"
                multiple
                collapse-tags
                :teleported="false"
                style="width: 300px;"
                class="public-select"
                @change="changeDeviceTb"
            >
              <el-option
                  v-for="item in ops"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>

          </div>
          <div v-if="tbValue.thb===1" class="">
            <el-date-picker
                v-model="tbValue.dateTime"
                type="datetimerange"
                :prefix-icon="IconDate"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                date-format="YYYY-MM-DD HH:mm:ss"
                :teleported="false"
                class="elect-date public-date"
                @change="changeDeviceTbDate"
            />
          </div>
          <div v-if="tbValue.thb===2">
            <el-date-picker
                v-model="tbValue.hbdateTime"
                :prefix-icon="IconDate"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                date-format="YYYY-MM-DD"
                type="dates"
                placeholder="请选择"
                class="elect-date public-date"
                @change="changeDeviceHbDate"
            />
          </div>
        </div>
        <div ref="chartRef" style="width: 100%; height: 100%;"></div>
      </div>
      <div class="elect-alarm">
        <div class="public-alarm public-list_tit"/>
        <el-scrollbar class="elect-alarm_list" height="313">
          <div class="elect-alarm_li" v-for="(item,index) in alarmInformation" :key="index">
            <div class="alarm-li_left">
              <div class="alarm-tit">
                <em class="alarm-num alarm-red" :style="{backgroundColor:item.alarmColor}">{{ item.type_ext }}</em>
                <span>{{ item.deviceName }}（{{ item.pointName }}）</span>
              </div>
              <div class="alarm-tit_desc">报警数值{{ item.alarmValue }}{{ item.unit }}</div>
            </div>
            <div class="alarm-li_date">
              {{ item.createDate }}
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <div class="elect-bom">
      <div class="elect-left">
        <div class="public-day public-list_tit"/>
        <div class="elect-bom_cont">
          <div class="elect-bom_select">
            <span>单位：kwh</span>
            <el-select
                v-model="dateConfig.day.id"
                placeholder="请选择"
                size="large"
                :suffix-icon="IconDropDown"
                :teleported="false"
                style="width: 257px;"
                class="elect-select public-select"
                @change="_getEnergyConsumptionDnBarChart(dateConfig.day)"
            >
              <el-option
                  v-for="item in ops"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </div>
          <div ref="chartDay" style="width: 100%; height: 100%;"></div>
        </div>
      </div>
      <div class="elect-chart_month" style="height: 444px;">
        <div class="elect-chart_top">
          <div class="public-month public-list_tit"/>
          <div class="">
            <el-select
                v-model="dateConfig.month.id"
                placeholder="精馏操作实训装置"
                size="large"
                :suffix-icon="IconDropDown"
                :teleported="false"
                style="width: 257px;"
                class="elect-select public-select"
                @change="_getEnergyConsumptionDnBarChart(dateConfig.month)"
            >
              <el-option
                  v-for="item in ops"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </div>
        </div>
        <div class="elect-bom_cont">
          <div class="elect-bom_select">
            <span>单位：kwh</span>
          </div>
          <div ref="chartMonth" style="width: 100%; height: 100%;"></div>
        </div>
      </div>
      <div class="elect-right">
        <div class="public-year public-list_tit"/>
        <div class="elect-bom_cont">
          <div class="elect-bom_select">
            <span>单位：kwh</span>
            <el-select
                v-model="dateConfig.year.id"
                placeholder="精馏操作实训装置"
                size="large"
                :suffix-icon="IconDropDown"
                :teleported="false"
                style="width: 257px;"
                class="elect-select public-select"
                @change="_getEnergyConsumptionDnBarChart(dateConfig.year)"
            >
              <el-option
                  v-for="item in ops"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </div>
          <div ref="chartYear" style="width: 100%; height: 100%;"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
.page-name {
  position: absolute;
  top: 60px;
  left: 16px;
  display: flex;
  align-items: center;

  .public-back_img {
    width: 32px;
    height: 32px;
  }

  .public-back_tit {
    margin-left: 6px;
    color: transparent;
    background-image: linear-gradient(#EEEEEE 0%, #1EA0FF 100%);
    -webkit-background-clip: text;
    font-family: YouSheBiaoTiHei;
    font-size: 24px;
    line-height: 31px;
    font-style: normal;
    font-weight: bold;
  }
}

.home-all {

}

.elect-top {
  display: flex;
  align-items: center;
  padding: 15px 0px 30px 40px;

  .elect-li {
    width: 435px;
    height: 98px;
    margin-right: 46px;
    padding: 15px 6px 17px 128px;
    background-position: center center;
    background-size: 100% 90%;

    &.elect-li:last-child {
      margin-right: 0;
    }

    .elect-li_cont {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .elect-li_tit {
        display: flex;
        align-items: center;
        margin-bottom: 13px;

        .elect-li_tit--text {
          margin-right: 27px;
          font-family: YouSheBiaoTiHei;
          font-size: 21px;
          color: #fff;
          font-style: normal;
        }

        .elect-li_tit--num {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 18px;
          color: #fff;
          line-height: 25px;
          font-style: normal;

          em {
            font-family: YouSheBiaoTiHei;
            font-size: 24px;
            color: #F7931F;
            margin-right: 3px;
            font-style: normal;
          }
        }
      }

      .elect-li_prop {
        display: flex;
        align-items: center;
        font-style: normal;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #fff;

        .elect-prop_tit {
          font-size: 14px;
        }

        em {
          margin: 0 4px;
          font-size: 18px;
          color: #F7931F;
          font-style: normal;
        }

        .elect-prop_num {
          font-size: 18px;
        }
      }
    }
  }
}

.elect-prop_up {
  margin-right: 10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent; /* 左侧边框透明 */
  border-right: 10px solid transparent; /* 右侧边框透明 */
  border-bottom: 15px solid #24CC88; /* 底部边框为黑色，形成上三角 */
  border-radius: 5px;
}

.elect-prop_down {
  margin-right: 10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent; /* 左侧边框透明 */
  border-right: 10px solid transparent; /* 右侧边框透明 */
  border-top: 15px solid #F7581F; /* 底部边框为黑色，形成上三角 */
  border-radius: 5px;
}

.elect-day {
  background: url("@/assets/electricity/elect1.png") no-repeat;
}

.elect-week {
  background: url("@/assets/electricity/elect2.png") no-repeat;
}

.elect-month {
  background: url("@/assets/electricity/elect3.png") no-repeat;
}

.elect-middle {
  display: flex;
  align-items: center;

  .elect-left {
    width: 471px;
    height: 390px;
    margin-right: 15px;
  }

  .elect-chart {
    width: 957px;
    height: 390px;
    margin-right: 23px;
  }

  .elect-alarm {
    width: 454px;
    height: 390px;
    overflow: hidden;
  }
}

.elect-bom {
  display: flex;
  align-items: center;
  margin-top: 11px;

  .elect-left {
    width: 471px;
    height: 390px;
    margin-right: 15px;
  }

  .elect-chart_month {
    width: 957px;
    height: 390px;
    margin-right: 23px;
  }

  .elect-right {
    width: 454px;
    height: 390px;
  }
}

/*.elect-chart_h{
  height: calc(100% - 47px);
}*/

.elect-left_cont, .elect-chart, .elect-alarm_list, .elect-bom_cont, .elect-chart_month {
  background: linear-gradient(to top, rgba(0, 169, 255, 0.2), rgba(0, 113, 188, 0.04));
}

.elect-bom_cont {
  height: calc(100% - 25px);

  .elect-bom_select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px 0;
    margin-top: 25px;

    span {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 18px;
      color: #fff;
      font-style: normal;
    }
  }
}

.elect-chart_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.elect-left_cont {
  padding: 29px 21px 27px 26px;

  .elect-cont_top {
    display: flex;
    align-items: center;

    .elect-cont_img {
      width: 175px;
      height: 125px;
      margin-right: 22px;
    }

    .elect-cont_tit {
      p {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #fff;
        font-style: normal;
        margin-bottom: 10px;
      }

      span {
        font-family: YouSheBiaoTiHei;
        font-size: 24px;
        color: #00FFFF;
        font-style: normal;
      }
    }
  }

  .elect-left_list {
    display: flex;
    align-items: center;
    margin-top: 50px;

    .elect-left_li {
      width: 191px;
      height: 82px;
      background: url("@/assets/device/device-bg.png") no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      padding: 0 10px;
      margin-right: 12px;

      &.elect-left_li:last-child {
        margin-right: 0;
      }

      .elect-li_img {
        width: 37px;
        height: 37px;
        margin-right: 11px;
      }

      .elect-li_cont {
        span {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #fff;
          text-shadow: 0px 2px 6px #011853;
          font-style: normal;
        }

        p {
          font-family: PingFangSC, PingFang SC;
          font-size: 14px;
          color: #fff;
          font-style: normal;
          margin-top: 10px;

          em {
            font-family: YouSheBiaoTiHei;
            font-size: 18px;
            color: #00FFFF;
            font-style: normal;
          }
        }
      }
    }
  }
}

.elect-chart {
  padding: 0 20px 0 13px;

  .elect-chart_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.elect-alarm_list {
  padding: 0 21px 4px;
  margin-top: 8px;

  .elect-alarm_li {
    background: #0E233E;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between;
    padding: 14px 11px 18px 12px;

    &.elect-alarm_li:last-child {
      margin-bottom: 0;
    }

    .alarm-tit {
      display: flex;

      em {
        border-radius: 4px;
        padding: 1px 6px 3px 4px;
        font-style: normal;
        text-align: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #fff;
        font-style: normal;
      }

      span {
        margin-left: 5px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #0BE8F6;
        font-style: normal;
      }
    }

    .alarm-tit_desc {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #fff;
      font-style: normal;
      margin-top: 5px;
    }

    .alarm-li_date {
      font-family: PingFangSC, PingFang SC;
      width: 90px;
      font-weight: 400;
      font-size: 14px;
      color: #fff;
      font-style: normal;
      text-align: right;
    }
  }
}

.alarm-red {
  background: #F7581F;
}

.alarm-yellow {
  background: #F7931F;
}

.public-energy {
  background: url("@/assets/list-tit6.png") no-repeat;
}

.public-alarm {
  background: url("@/assets/list-tit7.png") no-repeat;
}

.public-day {
  background: url("@/assets/list-tit8.png") no-repeat;
}

.public-month {
  background: url("@/assets/list-tit9.png") no-repeat;
}

.public-year {
  background: url("@/assets/list-tit10.png") no-repeat;
}

.elect-select {
  margin-right: 8px;
}

.elect-date {
  height: 37px !important;
}

:deep(.elect-date .el-range__icon) {
  margin: 0 12px 0 16px;
}

:deep(.public-select .el-select__wrapper) {
  background: rgba(5, 35, 72, 0.41);
  border-radius: 5px;
  border: 1px solid #00AAFE;
  height: 37px;
  padding-left: 20px;
}

</style>
